import 'package:flutter/material.dart';
import 'package:flutter_demo/components/avatar_role_name.dart';
import 'package:flutter_demo/components/comment_like_read.dart';
import 'package:flutter_demo/config/app_colors.dart';
import 'package:flutter_demo/models/article_model.dart';
import 'package:flutter_demo/utils/util.dart';

class ArticleCard extends StatefulWidget {
  final ArticleItem articleItem;

  // final double paddingSize;

  const ArticleCard({
    Key key,
    this.articleItem,
    // this.paddingSize = 20.0,
  }) : super(key: key);

  @override
  _ArticleCardState createState() => _ArticleCardState();
}

const double spaceSize = 10; // 间距
const double paddingSize = 20; // padding

class _ArticleCardState extends State<ArticleCard> {
  double boxSize; // 盒子大小
  @override
  Widget build(BuildContext context) {
    boxSize = MediaQuery.of(context).size.width - paddingSize * 2;
    return Container(
      padding: EdgeInsets.all(paddingSize),
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _title(),
          SizedBox(
            height: paddingSize,
          ),
          // _cover(),
          _getCoverByType(),
          SizedBox(
            height: paddingSize,
          ),
          _bottom()
        ],
      ),
    );
  }

  /// 文章封面展示形式算法
  /// 1张=》1种
  /// 2张=》2种
  /// 3张=》2种+4种
  /// 4张=》2种+4种+1种
  ///
  /// coverType:
  /// 1张=》1
  /// 2张=》2,3
  /// 3张=》2,3,4,5,6,7
  /// 4张=》2,3,4,5,6,7,8
  ///基于图片的长度获取不同的随机展示类型
  int _getTypeByLength() {
    int length = widget.articleItem.coverUrlList.length;
    int coverType;
    switch (length) {
      case 2:
        coverType = getRandomRangeInt(2, 3);
        break;
      case 3:
        coverType = getRandomRangeInt(2, 7);
        break;
      case 4:
        coverType = getRandomRangeInt(2, 8);
        break;
      default:
        coverType = 1;
    }
    return coverType;
  }

  /// 基于不同coverType 返回不同的封面组件
  _getCoverByType() {
    int coverType = _getTypeByLength();
    // int coverType = 8;
    Widget _coverWidget;

    switch (coverType) {
      case 1:
        _coverWidget = _cover1();
        break;
      case 2:
        _coverWidget = _cover2();
        break;
      case 3:
        _coverWidget = _cover3();
        break;
      case 4:
        _coverWidget = _cover4();
        break;
      case 5:
        _coverWidget = _cover5();
        break;
      case 6:
        _coverWidget = _cover6();
        break;
      case 7:
        _coverWidget = _cover7();
        break;
      case 8:
        _coverWidget = _cover8();
        break;
      default:
    }

    return _coverWidget;
  }

  /// 1张
  Widget _cover1() {
    return SizedBox(
      width: boxSize,
      height: boxSize / 2,
      child: _cover(),
    );
  }

  /// 2张 竖 ||
  Widget _cover2() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 0),
        ),
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 2),
        ),
      ],
    );
  }

  /// 2张 横 =
  Widget _cover3() {
    return Column(
      children: [
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 0),
        ),
        SizedBox(height: spaceSize),
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 1),
        ),
      ],
    );
  }

  /// 3张 上1下2
  Widget _cover4() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 0),
        ),
        Column(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
            SizedBox(height: spaceSize),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
          ],
        ),
      ],
    );
  }

  /// 3张上2下1
  Widget _cover5() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            SizedBox(height: spaceSize),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        SizedBox(
          width: boxSize / 2 - spaceSize / 2,
          height: boxSize,
          child: _cover(index: 2),
        ),
      ],
    );
  }

  /// 3张 左2右1
  Widget _cover6() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        SizedBox(height: spaceSize),
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 2),
        ),
      ],
    );
  }

  /// 3张左1右2
  Widget _cover7() {
    return Column(
      children: [
        SizedBox(
          width: boxSize,
          height: boxSize / 2 - spaceSize / 2,
          child: _cover(index: 0),
        ),
        SizedBox(height: spaceSize),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 2),
            ),
          ],
        ),
      ],
    );
  }

  /// 4张
  Widget _cover8() {
    return Column(
      children: [
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            SizedBox(width: spaceSize),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
        SizedBox(height: spaceSize),
        Row(
          children: [
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 0),
            ),
            SizedBox(width: spaceSize),
            SizedBox(
              width: boxSize / 2 - spaceSize / 2,
              height: boxSize / 2 - spaceSize / 2,
              child: _cover(index: 1),
            ),
          ],
        ),
      ],
    );
  }

  // 标题组件
  Widget _title() {
    return Text(
      widget.articleItem.title,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontSize: 16,
        color: AppColors.active,
      ),
    );
  }

  // 封面组件
  Widget _cover({int index = 0}) {
    return Container(
      // padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: FadeInImage.assetNetwork(
          placeholder: 'assets/images/common/lazy-3.png',
          image: widget.articleItem.coverUrlList[index],
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  // 底部内容组件
  Widget _bottom() {
    return Row(
      children: [
        Expanded(
          child: AvatarRoleName(
            coverPictureUrl: widget.articleItem.userEdentity.coverPictureUrl,
            nickname: widget.articleItem.userEdentity.nickname,
            type: widget.articleItem.userEdentity.type,
          ),
        ),
        Expanded(
          child: CommentLikeRead(
            commentCount: widget.articleItem.commentCount,
            thumbCount: widget.articleItem.thumbUpCount,
            readCount: widget.articleItem.readCount,
          ),
        ),
      ],
    );
  }
}
